<template>
    <view
        class="two wrapper style3"
        style="background-image:url('https://picsum.photos/1920/1080')"
    >
        <view class="inner">
            <view class="flexgrid">
                <view v-for="item in hot_list" class="hot-list-item" :key="item.id">
                    <view class="hot-title">✨{{ item.title }}</view>
                    <view class="_p">{{ item.desc }}</view>
                    <navigator class="button alt learn-more"
                               :url="`/pages/post/index?id=${item.id}&cid=${item.cid}&index=true`">Learn More
                    </navigator>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {hotList} from "@/api";

export default {
    data() {
        return {
            hot_list: []
        }
    },
    created() {
        hotList().then(res => {
            this.hot_list = res
        })
    }
}
</script>

<style scoped>

</style>
